<template>
  <!-- 用户信息 -->
  <div class="myInfo">
    <!-- 背景 -->
    <div class="picture">
      <!-- <img
        src="https://www.lwjppz.cn/upload/2021/01/IMG_20201206_155135-7d3d5917705b472d85b5871d6ed721b3.jpg"
        alt=""
      /> -->
      <!-- 头像 -->
      <div class="via">
        <img
          :src="userInfo.avatar"
          :title="userInfo.account"
          v-if="userInfo.avatar"
        />
        <img
          src="../../state/img/login01.jpg"
          :title="userInfo.account"
          v-else
        />
      </div>
    </div>
    <!-- 用户信息等 -->
    <div class="info">
      <!-- 用户名 签名-->
      <div class="userInfo">
        <span v-if="this.userInfo.account">{{ this.userInfo.account }}</span>
        <span v-else>未登录</span>
        <p>{{ this.userInfo.id }}</p>
      </div>
      <!-- 数量 标签等 -->
      <ul>
        <li>
          <span class="num">99</span>
          <span class="txt">标签数</span>
        </li>
        <li>
          <span class="num">99</span>
          <span class="txt">标签数</span>
        </li>
        <li>
          <span class="num">99</span>
          <span class="txt">标签数</span>
        </li>
      </ul>
      <!--  icon 分享 -->
      <div class="share">
        <a href="javascript:;" class="iconfont">&#xe6ca;</a>
        <a href="javascript:;" class="iconfont">&#xe607;</a>
        <a href="javascript:;" class="iconfont">&#xe641;</a>
        <a href="javascript:;" class="iconfont">&#xe666;</a>
        <a href="javascript:;" class="iconfont">&#xe61a;</a>
        <a href="javascript:;" class="iconfont">&#xe885;</a>
      </div>
    </div>
  </div>
</template>

<script>
  import busLogin from '../HeadFoot/eventBusLogin.js';
  import { mapState } from 'vuex';
  export default {
    name: 'myInfo',
    data() {
      return {
        loginSate: true, // 判断 是否登录
      };
    },
    watch: {
      loginSate() {
        console.log('数据变化了');
        this.loginSate = false;
      },
    },
    computed: {
      ...mapState(['userInfo']),
    },
    methods: {
      //触发vuex  actions 下的函数
      getUserInfo() {
        this.$store.dispatch('getUserInfoX');
      },
    },
    created() {
      this.getUserInfo();
      // 接收 HeadBar组件 传过来的 判断用户是否退出的 数据
      busLogin.$on('loginState', val => {
        this.loginSate = val;
      });
    },
  };
</script>

<style lang="less" scoped>
  @import url('../../state/css/register/myInfo.less');
</style>
